<!--
 * @Description: 
 * @Version: 0.0
 * @Author: taosong
 * @Date: 2023-04-03 09:27:59
 * @LastEditors: taosong
 * @LastEditTime: 2023-04-04 13:22:55
-->
<template>
  <Poptip
    v-bind="attrs.poptip"
    :trigger="trigger"
    :title="title"
    :content="content"
  >
    <template #content>
      <slot name="content"></slot>
    </template>
    <Badge v-bind="attrs.badge">
      <slot name="default"></slot>
      <template #count>
        <component
          :is="`Icon`"
          :type="iconType"
          color="#ed4014"
          size="16"
          style="cursor: pointer"
          @click="showMessageClick"
        ></component>
      </template>
    </Badge>
  </Poptip>
</template>

<script setup lang="ts">
const props = defineProps({
  // 显示的图片信息
  imgSrc: {
    type: String,
    default:
      'https://img0.baidu.com/it/u=1684532727,1424929765&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675'
  },
  // icon 的 type
  iconType: {
    type: String,
    default: 'md-time'
  },
  // 弹框显示的标题
  title: {
    type: String,
    default: ''
  },
  // 弹框显示的内容
  content: {
    type: String,
    default: ''
  },
  // 触发方式
  trigger: {
    type: String,
    default: 'hover'
  },
  attrs: {
    type: Object,
    default: () => {
      return {
        poptip: {},
        badge: {}
      }
    }
  }
})

const showMessageClick = () => {
  console.log('showMessageClick')
}
</script>

<style scoped></style>
